<template>
  <div class="layout-container">
    <div class="main-head">
      <van-nav-bar
        fixed
        title="发布信息"
        left-text="返回"
        right-text="发布须知"
        left-arrow
      />
    </div>

    <div class="main-box">
      <!--内容描述-->
      <div class="city--content--desc">
        <span class="desc--label">内容描述: </span>
        <van-cell-group>
          <van-field placeholder="请输入发布的详情描述" />
        </van-cell-group>
        <div class="flex flex-align-center head-box">
          <a class="head-item">双休</a>
          <a class="head-item active">五险一金</a>
          <a class="head-item">包吃</a>
          <a class="head-item">包住</a>
          <a class="head-item">年底双薪</a>
          <a class="head-item">交通补助</a>
          <a class="head-item">交通补助</a>
        </div>
      </div>

      <!--文件上传-->
      <div class="upload-content">
        <van-uploader :after-read="onRead">
          <van-icon name="photograph" />
        </van-uploader>
      </div>

      <!--联系人-->
      <div class="user--content-filed">
        <van-cell-group>
          <van-field
            clearable
            label="联系人: "
          />
          <van-field
            clearable
            label="电话号码: "
            placeholder="请输入联系人的手机号码"
          />
        </van-cell-group>
      </div>

      <!--地址-->
      <div class="address-content-filed">
        <van-cell-group>
          <div class="address-time-filed flex flex-align-center flex-pack-justify">
            <span class="an-hairline--bottom address-content">请选择您信息现实的时长</span>
            <van-button size="small" round type="danger" @click="testFlag">选择时长</van-button>
          </div>
          <van-field
            clearable
            label="全网地址: "
            placeholder="粘贴全景网址或腾讯视频网址到此处" />
        </van-cell-group>
      </div>

      <!--置顶-->
      <div class="address-content-filed">
        <van-cell-group>
          <div class="address-time-filed flex flex-align-center flex-pack-justify">
            <span class="an-hairline--bottom address-content">置顶可以让更多的人看到</span>
            <van-button size="small" round type="danger">点击置顶</van-button>
          </div>
          <van-cell title="塞福利(可提高阅读量和转发量)">
            <template slot="right-icon">
              <van-switch v-model="checked" size="24px" active-color="#f44"/>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <!--塞福利-->
      <div class="address-content-filed">
        <van-cell-group>
          <van-field
            clearable
            label="福利金额: "
            placeholder="1至200元,达100元置顶一天"
          />
          <van-field
            clearable
            label="分成几分: "
            placeholder="分成几分(至少1份)"
          />
        </van-cell-group>
        <van-cell-group title="分组1">
          <van-cell title="是否平均分配福利">
            <template slot="right-icon">
              <van-switch v-model="checked" size="24px" active-color="#f44"/>
            </template>
          </van-cell>

          <van-cell title="是否开启口令模式">
            <template slot="right-icon">
              <van-switch v-model="checked" size="24px" active-color="#f44"/>
            </template>
          </van-cell>

          <van-field
            clearable
            label="福利口令: "
            placeholder="请在正文钟写出口令"/>
        </van-cell-group>
      </div>

      <!--福利服务费-->
      <div class="lishi-title">福利服务费(5%): 0 元</div>
    </div>

    <div class="publish-box">
      <van-button size="large" type="danger">确定发布</van-button>
    </div>
    <!--选择时长Pop-->
    <van-popup v-model="typeShow"  position="bottom">
      <van-picker
        show-toolbar
        title="请选择信息要显示的时长"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"/>
    </van-popup>
  </div>
</template>

<script>
import { Field, CellGroup, NavBar, Button, Popup, Toast, Picker, Cell, Switch, Uploader, Icon } from 'vant'
export default {
  name: 'issueInfoDetail',
  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [Cell.name]: Cell,
    [Switch.name]: Switch,
    [Uploader.name]: Uploader,
    [Icon.name]: Icon
  },
  data () {
    return {
      typeShow: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      checked: true
    }
  },
  methods: {
    testFlag () {
      this.typeShow = !this.typeShow
    },
    onConfirm (value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
      this.typeShow = false
    },
    onCancel () {
      this.typeShow = false
    },
    onRead (file) {
      console.log(file)
    }
  }
}
</script>

<style scoped lang="less">
  .main-box{
    margin-bottom: 50px;
    .van-cell {
      width: auto;
    }
  }

  .publish-box{
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    width: 100%;
    z-index: 99;
  }

  .city--content--desc{
    .desc--label{
      display: inline-block;
      padding: 8px 8px 5px 15px;
      font-size: 14px;
    }
    // 类型
    .head-box{
      border-bottom: 5px solid @white-gray;
      background-color: @white;
      padding: 8px;
      flex-wrap: wrap;
      .head-item{
        background:@white;
        border: 1px solid #E0E0E0;
        padding: 8px;
        display: inline-block;
        margin: 3px 5px 3px 0;
        color: #666;
        font-size: 12px;
        border-radius: 5px;
        &.active{
          border: 1px solid #ed414a;
          color: #ed414a;
        }
      }
    }
  }

  .upload-content{
    border-top: 5px solid @white-gray;
    border-bottom: 5px solid @white-gray;
    padding: 15px;
  }
  .user--content-filed{
    border-top: 10px solid @white-gray;
    border-bottom: 10px solid @white-gray;
  }

  .address-content-filed {
    border-bottom: 10px solid @white-gray;
    .address-time-filed{
      padding: 8px 14px 8px 15px;
      .address-content{
        display: inline-block;
        color: red;
        font-size: 14px;
      }
    }
  }

  .lishi-title{
    padding:0 15px 10px 8px;
    background-color: @white-gray;
    text-align: right;
    font-size: 12px;
    color: #323233;
  }
</style>
